<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
.tristate {
  position: relative;
  display: inline-block;
}
.tristate > input[type=radio] {
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  opacity: 0;
}
.tristate > input[type=radio] + i {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: top;
}
.tristate > input[type=radio] + i, .tristate > input[type=radio] + i:before, .tristate > input[type=radio] + i:after {
  transition: all 0.3s;
}
.tristate > input[type=radio]:first-child {
  z-index: 10;
}
.tristate > input[type=radio]:first-child:checked {
  z-index: 0;
}
.tristate > input[type=radio]:checked + input[type=radio] {
  z-index: 10;
}
.tristate > input[type=radio]:checked + i + label, .tristate > input[type=radio]:checked + i + label + label {
  display: none;
}
.tristate > input[type=radio]:checked + input[type=radio] + i + label, .tristate > input[type=radio]:checked + input[type=radio] + i + label + label + label {
  display: none;
}
.tristate > input[type=radio]:checked + input[type=radio] + input[type=radio] + i + label + label, .tristate > input[type=radio]:checked + input[type=radio] + input[type=radio] + i + label + label + label {
  display: none;
}
.tristate-checkbox > input[type=radio] + i {
  border: solid 2px #bdbdbd;
  border-radius: 3px;
}
.tristate-checkbox > input[type=radio] + i:before {
  content: " ";
  display: block;
  position: absolute;
  left: -2px;
  top: -2px;
  right: -2px;
  bottom: -2px;
  background-color: #8b8b8b;
  border-radius: 3px;
}
.tristate-checkbox > input[type=radio] + i:after {
  content: " ";
  display: block;
  position: absolute;
  left: 4px;
  top: 7px;
  color: white;
  border-bottom: solid 3px;
  opacity: 0;
}
.tristate-checkbox > input[type=radio]:checked + i {
  background-color: #009688;
}
.tristate-checkbox > input[type=radio]:checked + i:before {
  background-color: #009688;
}
.tristate-checkbox > input[type=radio]:checked + i:after {
  left: 1px;
  top: 3px;
  width: 14px;
  height: 5px;
  border-left: solid 3px;
  border-bottom: solid 3px;
  transform: rotate(-45deg);
  opacity: 1;
}
.tristate-checkbox > input[type=radio]:checked + input[type=radio] + i:after {
  width: 10px;
  height: 0px;
  border-left: none;
  border-bottom: solid 3px;
  transform: rotate(0);
  opacity: 1;
}
.tristate-checkbox > input[type=radio]:checked + input[type=radio] + input[type=radio] + i:before {
  opacity: 0;
  transform: scale(0);
}
.tristate-switcher > input[type=radio] {
  width: 46px;
  height: 24px;
  left: -3px;
  top: -1px;
}
.tristate-switcher > input[type=radio] + i {
  width: 40px;
  height: 16px;
  margin-top: 2px;
  background-color: #bdbdbd;
  border-radius: 8px;
}
.tristate-switcher > input[type=radio] + i:before {
  content: " ";
  position: absolute;
  top: -3px;
  left: -3px;
  display: block;
  width: 24px;
  height: 24px;
  background-color: #fafafa;
  border-radius: 50%;
  box-shadow: 0 1px 8px 1px rgba(0, 0, 0, 0.3);
}
.tristate-switcher > input[type=radio]:checked + i {
  background-color: #a5d7a7;
}
.tristate-switcher > input[type=radio]:checked + i:before {
  left: 19px;
  background-color: #4caf50;
}
.tristate-switcher > input[type=radio]:checked + input[type=radio] + i:before {
  left: 8px;
}
.tristate-switcher > input[type=radio]:checked + input[type=radio] + input[type=radio] + i {
  background-color: #f9a19a;
}
.tristate-switcher > input[type=radio]:checked + input[type=radio] + input[type=radio] + i:before {
  background-color: #f44336;
}
.tristate-rotate label {
  display: inline-block;
  padding-top: 3px;
  padding-left: 3px;
}
.tristate-rotate > input[type=radio] {
  width: 30px;
  height: 30px;
}
.tristate-rotate > input[type=radio] + i {
  width: 24px;
  height: 24px;
  margin: 5px;
  background-color: #ccc;
  border-radius: 50%;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3), inset 1px 1px 2px rgba(255, 255, 255, 0.4), inset -1px -1px 2px rgba(0, 0, 0, 0.4);
}
.tristate-rotate > input[type=radio] + i:before {
  content: " ";
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  margin-left: -1px;
  margin-top: -1px;
  border-radius: 50%;
  box-shadow: -16px 0 0 #8b8b8b, 0 -16px 0 #8b8b8b, 16px 0 0 #8b8b8b;
}
.tristate-rotate > input[type=radio] + i:after {
  content: " ";
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  width: 10px;
  margin-top: -1px;
  border-bottom: solid 2px #666;
  transform-origin: 12px 50%;
}
.tristate-rotate > input[type=radio]:checked + i:after {
  transform: rotate(180deg);
}
.tristate-rotate > input[type=radio]:checked + input[type=radio] + i:after {
  transform: rotate(90deg);
}
.tristate-rotate > input[type=radio]:checked + input[type=radio] + input[type=radio] + i:after {
  transform: rotate(0deg);
}
  </style>
</head>
<body>
  <div>
    <span class="tristate tristate-checkbox">
      <input type="radio" id="item1-state-off" name="item1" value="-1" checked>
      <input type="radio" id="item1-state-null" name="item1" value="0">
      <input type="radio" id="item1-state-on" name="item1" value="1">
      <i></i>
      <label for="item1-state-null">Выключено</label>
      <label for="item1-state-on">Не задано</label>
      <label for="item1-state-off">Включено</label>
    </span>
  </div>
  <div style="margin-top: 10px;">
    <span class="tristate tristate-switcher">
      <input type="radio" id="item2-state-off" name="item2" value="-1" checked>
      <input type="radio" id="item2-state-null" name="item2" value="0">
      <input type="radio" id="item2-state-on" name="item2" value="1">
      <i></i>
      <label for="item2-state-null">Выключено</label>
      <label for="item2-state-on">Не задано</label>
      <label for="item2-state-off">Включено</label>
    </span>
  </div>
  <div style="margin-top: 15px;">
    <span class="tristate tristate-rotate">
      <input type="radio" id="item3-state-off" name="item3" value="-1" checked>
      <input type="radio" id="item3-state-null" name="item3" value="0">
      <input type="radio" id="item3-state-on" name="item3" value="1">
      <i></i>
      <label for="item3-state-null">1</label>
      <label for="item3-state-on">2</label>
      <label for="item3-state-off">3</label>
    </span>
  </div>
</body>
</html>